<template>
  <transition name="q-transition--slide-left">
    <AuthCode v-if="step === 1" v-model:captchaKey="captchaKey" v-model:step="step"
              v-model:username="username"></AuthCode>
    <VerifyCode v-else-if="step === 2" v-model:captchaKey="captchaKey" v-model:step="step"
                v-model:username="username"></VerifyCode>
    <SetPwd v-else-if="step === 3" v-model:captchaKey="captchaKey" v-model:step="step"
            v-model:username="username"></SetPwd>
  </transition>
</template>

<script setup>
import { ref, watch } from 'vue'
import AuthCode from './AuthCode.vue'
import VerifyCode from './VerifyCode.vue'
import SetPwd from './SetPwd.vue'

defineProps({
  modelValue: Boolean
})
const emits = defineEmits(['update:modelValue'])

const step = ref(1)
const username = ref('')
const captchaKey = ref('')

watch(() => step.value, value => {
  if (value === 4) emits('update:modelValue', false)
})
</script>